<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="../common.css" />
<style>
    .container {
        width: 200px;
        height: 200px;
        position: relative;

    }

    svg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .container circle {
        fill: none;
    }

    .outer-circle {
        transform-origin: center;
        animation: rotate 5s infinite linear;
    }

    .inner-circle {
        transform-origin: center;
        animation: rotate 5s infinite linear reverse;
    }

    /* @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(1turn);
        }
    } */

    .container span {
        font-family: "Bahnschrift";
        text-anchor: middle;
        fill: white;
        font-size: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<body>
    <div id="app">
        <div class="container">
            <svg viewBox="0 0 100 100">
                <defs>
                    <radialGradient id="gradient" cx="50" cy="50" r="40">
                        <stop offset="30%" stop-color="red" />
                        <stop offset="100%" stop-color="orange" />
                    </radialGradient>
                </defs>
                <mask id="mask">
                    <!-- 用一个蒙版mask -->
                    <circle cx="50" cy="50" r="40" stroke-dasharray="5 0.5" stroke-width="5" stroke="#fff"></circle>
                </mask>
                <!-- 设置底部最大的圆环 -->
                <circle cx="50" cy="50" r="40" stroke-dasharray="8 1.5" stroke-width="8" stroke="rgba(0,0,0,0.1)">
                </circle>
                <!-- 设置进度条的颜色、长度等，覆盖蒙版 -->
                <circle cx="50" cy="50" r="40" :stroke-dasharray="getCircleDash(curr, total, 40)" stroke-width="5"
                    stroke="url(#gradient)" mask="url(#mask)" class="outer-circle"></circle>
            </svg>

            <!-- <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:red;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
                </linearGradient>
            </defs> -->
            <!-- <svg width="200" height="200">
                <defs>
                    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" style="stop-color:red;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
                    </linearGradient>
                </defs>
                <rect width="200" height="200" fill="url(#grad1)" />
            </svg> -->
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                total: 200,
                curr: 88,
            };
        },
        methods: {
            getPercent(e1, e2) {
                return ((100 * e1) / e2).toFixed(0);
            },
            getCircleDash(e1, e2, r) {
                let girth = 2 * Math.PI * r;
                return (e1 / e2) * girth + " " + girth;
            },
            getDash(r) {
                return r * 0.3 + " " + r * 0.1;
            },
        },
    });
</script>

</html>